import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

interface BucketItem {
  id: number
  text: string
  completed: boolean
  category: string
  completedDate?: string
  completedNote?: string
}

interface BucketItemFormProps {
  isOpen: boolean
  onClose: () => void
  onSubmit: (item: BucketItem | Omit<BucketItem, 'id'>) => void
  initialData?: BucketItem | null
  categories: string[]
}

export function BucketItemForm({ isOpen, onClose, onSubmit, initialData, categories }: BucketItemFormProps) {
  const [formData, setFormData] = useState({
    text: '',
    category: categories[0] || '旅行',
    completed: false
  })

  useEffect(() => {
    if (initialData) {
      setFormData({
        text: initialData.text,
        category: initialData.category,
        completed: initialData.completed
      })
    } else {
      setFormData({
        text: '',
        category: categories[0] || '旅行',
        completed: false
      })
    }
  }, [initialData, isOpen, categories])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.text.trim()) {
      alert('请填写约定内容')
      return
    }

    if (initialData) {
      onSubmit({
        ...initialData,
        ...formData
      })
    } else {
      onSubmit(formData)
    }
  }

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
        >
          <motion.div
            className="bg-white rounded-3xl p-8 max-w-md w-full"
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.8, opacity: 0 }}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-2xl font-bold text-gray-800">
                {initialData ? '编辑约定' : '添加新约定'} ✨
              </h2>
              <button
                onClick={onClose}
                className="text-gray-400 hover:text-gray-600 text-2xl"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleSubmit} className="space-y-6">
              {/* 约定内容 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  约定内容 *
                </label>
                <input
                  type="text"
                  value={formData.text}
                  onChange={(e) => setFormData(prev => ({ ...prev, text: e.target.value }))}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-400"
                  placeholder="我们想要一起..."
                  required
                />
              </div>

              {/* 分类 */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  分类
                </label>
                <select
                  value={formData.category}
                  onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-400"
                >
                  {categories.map(category => (
                    <option key={category} value={category}>
                      {category}
                    </option>
                  ))}
                </select>
              </div>

              {/* 提交按钮 */}
              <div className="flex space-x-4 pt-4">
                <button
                  type="button"
                  onClick={onClose}
                  className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors"
                >
                  取消
                </button>
                <button
                  type="submit"
                  className="flex-1 px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl hover:from-purple-600 hover:to-pink-600 transition-all"
                >
                  {initialData ? '保存修改' : '添加约定'} 💕
                </button>
              </div>
            </form>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
